<template>
	<view class="invitation">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="none">
			<template v-slot:right>
				<view class="right_slot" @click="router('/pages/my/invitation_record')">
					<image src="@/static/images/23.png"></image>
					<view>{{$t('my.邀请记录')}}</view>
				</view>
			</template>
		</uv-navbar>
		<view class="content">
			<view class="header">
				<image src="@/static/images/t1.png"></image>
			</view>
			<view class="code_view">
				<view class="title">{{$t('my.推广二维码')}}</view>
				<uv-qrcode ref="qrcode" :value="invitation_url" :options="options"></uv-qrcode>
				<view class="number">{{$t('my.邀请码ID')}}： {{invitation_code}}</view>
			</view>
			<view class="btn_view">
				<view class="copy" @click="copy(invitation_code)">{{$t('my.复制地址')}}</view>
				<view class="save" @click="submit">{{$t('my.保存二维码')}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const url = import.meta.env.VITE_H5_URL;
	import {
		ref,
		shallowRef
	} from "vue";
	import useStore from "@/stores/index.js";
	const {
		useUserStore
	} = useStore();
	import useBase from "@/hooks/useBase.js";
	const {
		copy,
		router,
		preview_image
	} = useBase();

	const options = ref({});
	const invitation_url = ref(uni.getStorageSync('share_url')),
		invitation_code = ref("");
	invitation_code.value = useUserStore.user_info.invitation_code;
	options.value = {
		data: invitation_url.value,
		size: 460,
		useDynamicSize: false,
		margin: 5
	};
	const qrcode = shallowRef();
	const submit = () => {
		qrcode.value.toTempFilePath({
			success: (res) => {
				let url = res.tempFilePath;
				preview_image(url)
			}
		})
	};
</script>

<style scoped lang="scss">
	.invitation {
		min-height: 100vh;
		background: url(@/static/images/bg2.png) no-repeat;
		background-size: 100% 100%;

		.right_slot {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 20px;
				height: 20px;
			}

			view {
				color: #FFFFFF;
				font-size: 10px;
				padding-top: 4px;
				box-sizing: border-box;
			}
		}

		.content {
			padding: 0 30rpx;
			box-sizing: border-box;

			.header {
				padding-top: 88rpx;
				padding-bottom: 106rpx;
				display: flex;
				justify-content: center;

				image {
					width: 583rpx;
					height: 51rpx;
				}
			}

			.code_view {
				width: 100%;
				height: 690rpx;
				border-radius: 20rpx;
				background: rgba(31, 31, 45, 0.9);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.title {
					text-align: center;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 50rpx;
				}

				.number {
					color: #FFFFFF;
					font-size: 36rpx;
					text-align: center;
					margin-top: 40rpx;
				}
			}

			.btn_view {
				margin-top: 50rpx;
				display: flex;
				justify-content: space-between;

				.copy {
					width: 320rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #111111;
					font-size: 28rpx;
					border-radius: 20rpx;
					background: #DDF247;
				}

				.save {
					width: 320rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #000;
					font-size: 28rpx;
					border-radius: 20rpx;
					background: #fff;
				}
			}
		}
	}
</style>